<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName" appear>
      <span>
        <multi-tab-store-consumer v-if="!parentCustomRouterView">
          <component :is="Component" v-if="Component" />
          <slot v-else />
        </multi-tab-store-consumer>
        <template v-else>
          <component :is="Component" v-if="Component" />
          <slot v-else />
        </template>
      </span>
    </transition>
  </router-view>
</template>

<script lang="ts">
import { computed, defineComponent, provide, inject } from 'vue';
import { MultiTabStoreConsumer } from '@/components/multi-tab';
import { injectMenuState } from './use-menu-state';

const customRouterView = Symbol('custom-router-view');
export default defineComponent({
  name: 'CustomRouterView',
  components: {
    MultiTabStoreConsumer
  },
  setup() {
    const menuState = injectMenuState();
    // just use only once multi-tab-store-consumer
    const parentCustomRouterView = inject(customRouterView, null);
    provide(customRouterView, true);
    return {
      parentCustomRouterView,
      transitionName: computed(() => menuState.transitionName.value)
    };
  }
});
</script>
